/*
 * @Author: hongbin
 * @Date: 2022-03-27 08:53:44
 * @LastEditors: hongbin
 * @LastEditTime: 2022-04-05 15:57:18
 * @Description:菜单
 */
import { FC, ReactElement, useState } from "react";
import styled, { css } from "styled-components";
import { ColumnCenter } from "../../styled";

interface IProps {
  data: { name: string; icon: JSX.Element }[];
  onChange: (data: IProps["data"][number] | any) => void;
  defaultSelect?: number;
}

const Menu: FC<IProps> = ({ data, onChange, defaultSelect = 0 }): ReactElement => {
  const [select, setSelect] = useState(defaultSelect);

  return (
    <Container>
      {data.map((item, index) => (
        <Item
          select={select === index}
          key={item.name}
          onClick={() => {
            setSelect(index);
            onChange(item);
          }}
        >
          {item.icon}
          {item.name}
        </Item>
      ))}
    </Container>
  );
};

export default Menu;

const Container = styled.div`
  display: flex;
  padding: 0.5vh 0 0.5vw 0.5vw;
`;

const Item = styled.div<{ select: boolean }>`
  user-select: none;
  cursor: pointer;
  padding: 0.1vw 0.3vw;
  margin: 0.1vw;
  letter-spacing: 1px;
  font-size: 0.9vw;
  border-radius: 0.3vw;
  border-top-left-radius: 0.5vw;
  border-top-right-radius: 0.5vw;
  ${ColumnCenter};
  background: #eee;
  svg {
    width: 1.5vw;
    height: 1.5vw;
    margin-right: 0.2vw;
  }
  transition: background 0.4s linear, bold 0.4s linear, box-shadow 0.3s linear;

  ${({ select }) =>
    select
      ? css`
          background: linear-gradient(130deg, #17fdf5, #d9f302);
          color: #4b81bb;
          font-weight: bold;
          box-shadow: 0px 3px 3px 0px #aad509;
          border-bottom-right-radius: 0;
          border-bottom-left-radius: 0;
          :first-child {
            box-shadow: 3px 3px 3px 0px #aad509;
            border-bottom-right-radius: 0;
            border-bottom-left-radius: 0.3vw;
          }
          :last-child {
            box-shadow: -3px 3px 3px 0px #aad509;
            border-bottom-left-radius: 0;
            border-bottom-right-radius: 0.3vw;
          }
        `
      : css`
          svg {
            path {
              fill: #666;
            }
          }
          color: #444;
        `}
`;
